<template>
  <div class="app-container">
    <el-card style="box-shadow: none; margin-bottom:1rem">
      <div class="title-row">
        <span>集群状态</span>
      </div>

      <el-row
        :gutter="10"
        type="flex"
        style="margin-top: 10px;"
      >
        <el-col :span="8">
          <StatusItem
            :title="'总资源'"
            tips="当前值,每五分钟更新一次"
            :destination="true"
            :destination-name="'集群信息详情'"
            @navigate="() => {
              clusterInfoDialogVisible = true
            }"
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <CountItem
                  icon="el-icon-menu"
                  :title="'集群'"
                  :content="this.totalResource.CMNUM"
                />
              </el-col>
              <el-col :span="12">
                <CountItem
                  :title="'服务器'"
                  :content="this.totalResource.HOSTCOUNT"
                  icon="el-icon-menu"
                />
              </el-col>
            </el-row>

            <el-row
              :gutter="10"
              style="margin-top: 10px;"
            >
              <el-col :span="8">
                <CountItem
                  icon="el-icon-receiving"
                  :title="'内存'"
                  :content="this.totalResource.MEMCOUNT"
                />
              </el-col>
              <el-col :span="8">
                <CountItem
                  icon="el-icon-cpu"
                  :title="'CPU'"
                  :content="this.totalResource.CPUCOUNT"
                />
              </el-col>
              <el-col :span="8">
                <CountItem
                  icon="el-icon-cpu"
                  :title="'存储'"
                  :content="this.totalResource.HDFSCOUNT"
                />
              </el-col>
            </el-row>
          </StatusItem>
        </el-col>

        <el-col
          :span="8"
        >
          <StatusItem
            :title="'服务'"
            tips="当前值,每五分钟更新一次"
            :destination="true"
            @navigate="() => {
              $router.push('/monitorManage/stateMonitor')
            }"
          >
            <div style="display: grid; grid-template-rows: repeat(3,1fr); gap:6px;margin-top: 2px;">
              <div
                style="cursor: pointer;"
                @click="() => {
                  selectedServiceState = 1;
                  serviceDialogVisible = true 
                }"
              >
                <i
                  class="el-icon-circle-check"
                  style="color: #67c23a;margin-right: 0.3rem;"
                />
                <span>正常</span>
                <el-progress
                  class="custom-progress"
                  :percentage="totalService ? serviceState.GOOD / totalService * 100 : 0"
                  :stroke-width="12"
                  color="#67c23a"
                  :format="progressFormart"
                />
              </div>
              <div
                style="cursor: pointer;"
                @click="() => {
                  selectedServiceState = 2;
                  serviceDialogVisible = true 
                }"
              >
                <i
                  class="el-icon-warning-outline"
                  style="color: #ebb563;margin-right: 0.3rem;"
                />
                <span>告警</span>
                <el-progress
                  class="custom-progress"
                  :percentage="totalService ? serviceState.CONCERNING / totalService * 100 : 0"
                  :stroke-width="12"
                  color="#ebb563"
                  :format="progressFormart"
                />
              </div>

              <div
                style="cursor: pointer;"
                @click="() => {
                  selectedServiceState = 3;
                  serviceDialogVisible = true 
                }"
              >
                <i
                  class="el-icon-circle-close"
                  style="color: #ff7676;margin-right: 0.3rem;"
                />
                <span>异常</span>
                <el-progress
                  class="custom-progress"
                  :percentage="totalService ? serviceState.BAD / totalService * 100 : 0"
                  :stroke-width="12"
                  color="#ff7676"
                  :format="progressFormart"
                />
              </div>
            </div>
          </StatusItem>
        </el-col>

        <el-col :span="8">
          <StatusItem
            tips="当前值,每五分钟更新一次"
            :title="'任务'"
            :destination="true"
            @navigate="() => { $router.push('/monitorManage/taskMonitor') }"
          >
            <el-row
              :gutter="10"
              type="flex"
            >
              <el-col :span="12">
                <CountItem
                  icon="el-icon-collection-tag"
                  :title="'YARN任务'"
                  :content="this.totalResource.YARNCOUNT"
                />
              </el-col>
              <el-col
                style="height: 120px;"
                :span="12"
              >
                <CountItem
                  icon="el-icon-collection-tag"
                  :title="'IMPALA任务'"
                  :content="this.totalResource.IMPALACOUNT"
                />
              </el-col>
            </el-row>
          </StatusItem>
        </el-col>
      </el-row>

    </el-card>

    <el-card
      v-for="host in hostData"
      :key="host.name"
      style="margin-bottom: 1rem;"
      shadow="never"
    >
      <div style="display: flex; align-items:flex-end;margin-bottom: 1rem;">
        <span class="title-row">{{ host.name }}</span>
        <span style="font-weight: bold; font-size: 15px;margin-left: 5px;gap:1rem">主机总数：{{ host.children.length }}</span>
      </div>
      
      <div style="display: grid; grid-template-columns: repeat(2,1fr); gap:0.6rem">
        <OverviewItem
          v-for="(child) in host.children"
          :key="child.cmFlag"
          :resource-usage="{
            yarnCpu: child.yarnCpuUsePro,
            yarnMemo:child.yarnMemoryUsePro,
            impalaMemo:child.impalaMemoryUsePro
          }"
          :service-real-time="child.serviceStates"
          :task-count="{
            yarnSum:child.yarnSum,
            yarnRunning:child.yarnRunning,
            yarnFailed:child.yarnFailed,
            impalaSum:child.impalaSum,
            impalaRunning:child.impalaRunning,
            impalaFailed:child.impalaFailed
          }"
          :hdfs-use="child.hdfsUse"
          :cm-name="child.cmName"
          :cm-url="child.url"
        />
      </div>
    </el-card>
    
    <ServiceDialog
      :dialog-visible="serviceDialogVisible"
      :state="selectedServiceState"
      @close="serviceDialogVisible = false"
    />
    <ClusterInfoDialog
      :dialog-visible="clusterInfoDialogVisible"
      @close="clusterInfoDialogVisible = false"
    />
  </div>
</template>

<script>
import OverviewItem from './components/OverviewItem.vue'
import StatusItem from './components/StatusItem.vue'
import CountItem from './components/CountItem.vue'
import clusterOverviewApi from '@/api/monitor/overview'
import ServiceDialog from './components/ServiceDialog.vue'
import ClusterInfoDialog from './components/ClusterInfoDialog/index.vue'
export default {
  components: {
    OverviewItem,
    StatusItem,
    CountItem,
    ServiceDialog,
    ClusterInfoDialog
  },
  data() {
    return {
      serviceDialogVisible: false,
      clusterInfoDialogVisible: false,
      selectedServiceState: 0,
      serviceState: {
        'BAD': 0,
        'GOOD': 0,
        'CONCERNING': 0
      },
      totalResource: {
        'MEMUSED': '0',
        'IMPALACOUNT': '0',
        'CPUCOUNT': '0',
        'CPUALLOCATED': '0',
        'MEMCOUNT': '0',
        'MEMALLOCATED': '0',
        'CMNUM': '0',
        'HOSTCOUNT': '0',
        'HDFSCOUNT': '0',
        'YARNCOUNT': '0',
        'CPUUSED': '0',
        'HDFSUSED': '0'
      },
      hostData: {
        jinQiao: {
          name: '金桥',
          children: []
        },
        wanGuo: {
          name: '万国',
          children: []
        }
      }
    }
  },
  computed: {
    totalService() {
      return this.serviceState.BAD + this.serviceState.GOOD + this.serviceState.CONCERNING
    }
  },
  created() {
    this.monitorStatusInquiry()
    this.queryAllServiceCount()
    this.cmResourceBasicData()
  },
  methods: {
    async monitorStatusInquiry() {
      const res = await clusterOverviewApi.monitorStatusInquiry()
      for (const key in res) {
        if (typeof res[key] === 'number') {
          res[key] = res[key].toString()
        }
        this.totalResource[key] = res[key]
      }
    },
    async queryAllServiceCount() {
      const res = await clusterOverviewApi.queryAllServiceCount()
      res.forEach(element => {
        this.serviceState[element.state] = element.countNumber
      })
    },
    async cmResourceBasicData() {
      const res = await clusterOverviewApi.cmResourceBasicData()
      res.forEach((item) => {
        if (item.areaId === '1') {
          this.hostData.jinQiao.children.push(item)
        } else {
          this.hostData.wanGuo.children.push(item)
        }
      })
    },
    progressFormart(percentage) {
      return `${Math.ceil(percentage / 100 * this.totalService)}/${this.totalService}`
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-progress {
  ::v-deep .el-progress__text {
    font-size: 13px !important;
    color:#3F9EFF !important
  }
}
</style>
